<template>
  <!-- 标题 -->
  <!-- <van-nav-bar title="文章" left-text="返回" @click-left="onClickLeft">
    <template #right>
      <van-icon name="search" size="22" />
    </template>
  </van-nav-bar> -->
  <!-- 导航 -->
  <div class="contants">
    <van-tabs v-model:active="activeName">
      <van-tab title="精选好文" naem="a">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @click="tiaozhuan"
        >
          <van-config-provider :theme-vars="themeVars">
            <van-card
              v-for="item in list"
              :key="item"
              price="Daisy"
              currency=""
              desc="你要忍，忍到春暖花开；你要看过世界辽阔，再评判是好是坏；你要卯足劲变好，再站在不敢想象的人身边，旗鼓相当；你要变成想象中的样子，这件事，一步都不能让"
              title="精选好文"
              thumb="http://mms2.baidu.com/it/u=2027991900,3129218719&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=540&h=300"
            >
              <template #footer>
                <van-icon name="eye-o" size="18" />
                <span> 30367</span>
              </template>
            </van-card>
          </van-config-provider>
        </van-list>
      </van-tab>

      <van-tab title="经验分享" name="b">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @click="tiaozhuan"
        >
          <van-config-provider :theme-vars="themeVars">
            <van-card
              v-for="item in list"
              :key="item"
              price="Daisy"
              currency=""
              desc="小时候，希望自己快点长大，长大了，却发现遗失了童年；单身时，开始羡慕恋人的甜蜜，恋爱时，怀念单身时的自由。很多事物，没有得到时总觉得美好，得到之后才开始明白：“我们得到的同时也在失去。"
              title="经验分享"
              thumb="http://mms1.baidu.com/it/u=1437282915,3236231214&fm=253&app=120&f=JPEG&fmt=auto&q=75?w=462&h=260"
            >
              <template #footer>
                <van-icon name="eye-o" size="18" />
                <span> 30367</span>
              </template>
            </van-card>
          </van-config-provider>
        </van-list>
      </van-tab>
      <van-tab title="技术精进" name="c">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @click="tiaozhuan"
        >
          <van-config-provider :theme-vars="themeVars">
            <van-card
              v-for="item in list"
              :key="item"
              price="Daisy"
              currency=""
              desc="不管怎样，生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事，它会让你变得更好，孤单和失落亦是如此。每件事到最后一定会变成一件好事，只要你能够走到最后"
              title="技术精进"
              thumb="http://mms2.baidu.com/it/u=2027991900,3129218719&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=540&h=300"
            >
              <template #footer>
                <van-icon name="eye-o" size="18" />
                <span> 30367</span>
              </template>
            </van-card>
          </van-config-provider>
        </van-list>
      </van-tab>
      <van-tab title="行业观察" name="d">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          @click="tiaozhuan"
        >
          <van-config-provider :theme-vars="themeVars">
            <van-card
              v-for="item in list"
              :key="item"
              price="Daisy"
              currency=""
              desc="出去走走，看看不同的风景，接触不同的人和事，你会发现，你的烦恼原来是那么微不足道。从现在开始，不沉溺幻想，不庸人自扰，好好生活，做一个接近幸福的人"
              title="行业观察"
              thumb="http://mms1.baidu.com/it/u=1437282915,3236231214&fm=253&app=120&f=JPEG&fmt=auto&q=75?w=462&h=260"
            >
              <template #footer>
                <van-icon name="eye-o" size="18" />
                <span> 30367</span>
              </template>
            </van-card>
          </van-config-provider>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const onClickLeft = () => history.back()
    const activeName = ref(0)
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const themeVars = {
      cardBackgroundColor: '#fff',
    }

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1)
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= 20) {
          finished.value = true
        }
      }, 500)
    }

    return {
      onClickLeft,
      activeName,
      onclick,
      list,
      loading,
      finished,
      onLoad,
      themeVars,
    }
  },
  data() {},
  methods: {
    tiaozhuan() {
      this.$router.push({ path: '/details' })
    },
  },
}
</script>

<style>
.contants {
  margin-top: 8vh;
}
</style>
